<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding:0px;
			margin: 0px;
		}
		.btn{
			width:200px;
			height: 50px;
			background-color: orange;
			margin:50px auto;
			font-size: 24px;
			text-align: center;
			line-height: 50px;
			text-transform:uppercase;
			cursor:pointer;
			position: relative;
		}
		/*两种写法有div.bubble和没有*/
/* 		.btn:after {
		  content: "";
		  background: red;
		  position: absolute;
		  width: 200px;
		  height: 200px;
		  left: 0;
		  right: 0;
		  top: 0;
		  bottom: 0;
		  opacity: 0;
		  margin: auto;
		  border-radius: 50%;
		  transition: all 0.75s ease-in-out;
		}
		.btn:active:after {
		  transform: scale(0);
		  opacity: 1;
		  transition: 0s;
		}
		 */		
		.bubble{
			position: absolute;
			right: 0px;
			left: 0px;
			top: 0px;
			bottom: 0px;
			margin: auto;
			width:200px;
			height: 200px;
			background: #fff;
			border-radius: 50%;
			transform: scale(1);
			opacity: 0;
			transition: all 0.5s ease-in-out;
		}
		.btn:active .bubble{
			opacity: 1;
			transform: scale(0);
			transition:0s;
		}
	</style>
</head>
<body>
	<div class="btn">click <div class="bubble"></div></div>
</body>
</html>